<script setup>
import { useUserStore } from '../store/user';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui';
import { createTheme, inputDark, datePickerDark } from 'naive-ui';
import { zhCN, dateZhCN } from 'naive-ui';
import { getUser } from '@/network/api';

const doPinia = () => {
  const userStore = useUserStore();
  console.log('name', userStore.fullName);

  const { name } = storeToRefs(userStore);
  console.log('name', name.value);
  // userStore.name = '李四'
  // console.log('userStore', userStore.name);

  userStore.updateName('李四');
  console.log('userStore', userStore.name);
};

const darkTheme = createTheme([inputDark, datePickerDark]);

onMounted(() => {
  const arr = [
    { id: 1, name: 'Zhangsan' },
    { id: 2, name: 'Lisi' },
    { id: 3, name: 'Wangwu' }
  ];

  const person = arr.find(item => {
    return item.name === 'Lisi';
  });
  console.log('person', person);

  getUser({}).then(res => {
    console.log('res', res);
  });
});
</script>

<template>
  <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
    <n-space vertical>
      <n-input />
      <n-date-picker />
    </n-space>
  </n-config-provider>
</template>

<style>
body {
  background: black;
}
    .div {
        flex-direction: row-reverse;
        justify-content: flex-start;

}
</style>
